<template>
    <h4>路由默认缓存机制</h4>
    <pre>{{ $route.query }}</pre>
    <h4>路由守卫</h4>
    <ul>
        <li>
            路由组件内守卫：直接定义在路由组件配置中
            <ol>
                <li>
                    beforeRouteUpdate：当前组件在被路由完成缓存时，参数发生变化时会自动执行的守卫<br>
                    beforeRouteUpdate 守卫方法是在路由切换时，URL地址变化前执行的守卫，此时激活路由尚未更新 <br>
                </li>
                <li>
                    beforeRouteEnter：路由进入前执行的方法(地址未替换，组件未渲染) <br>
                    通过该方法返回 false 或者 返回 Promise 的rejected 对象 阻止路由切换 <br>
                    也可以通过返回 其它路由地址或者路由对象配置(和RouterLink to 属性取值一致)，进行路由导航的重定向 <br>
                    也可以通过第三个next方法，进行参数传入，传入新的地址或者路由对象配置，实现重定向 <br>
                    返回其它结果或者不做返回定义，都属于运行方法路由 <br>
                    路由进入守卫多被用于登录和权限拦截操作中
                </li>
                <li>
                    beforeRouteLeave：当前路由组件作为正在被方法的路由组件，需要被其它路由通过导航切换进行替换显示时，需要执行的回调方法<br>
                    使用规则，参数，方式 等同于 beforeRouteEnter <br>
                    为尚未完成的组件页面操作提供提示功能，和逻辑控制功能 <br>
                </li>
            </ol>
        </li>
        <li>路由全局守卫：通过路由全局对象router定义所有组件都共享的守卫
            <ol>
                <li>
                    beforeEach：全局定义的进入守卫，功能等同于组件内守卫beforeRouteEnter <br>
                    beforeEach 守卫接收一个方法作为参数，方法的参数使用规则 方式 等同于 beforeRouteEnter <br>
                </li>
            </ol>
        </li>
        <li>路由全局独享守卫：通过路由表配置的方式，在路由全局代码下完成的单一组件控制守卫</li>
    </ul>

</template>

<script>
    export default {
        // 可能会导致多方法执行
        // watch:{
        //     "$route.query":function(){
        //         console.log("$route.query:",this.$route.query);
        //     }
        // },  
        beforeCreate(){
            console.log("RouterAliveView-beforeCreate");
        },
        created(){
            console.log("RouterAliveView-created-基于路由参数进行初始化异步请求完成页面渲染",this.$route.query);
        },  
        unmounted(){
            console.log("RouterAliveView-unmounted");
        },
        // beforeRouteEnter(to,from,next){
        //     console.log("RouterAliveView - beforeRouteEnter",this,to,from);
        //     let token  = sessionStorage.getItem("token")
        //     if(token){
        //         next();
        //     }else{
        //         // next("/route/login")
        //         next({
        //             path:"/route/login"
        //         })
        //     }
        // },
        beforeRouteEnter(to,from){
            console.log("RouterAliveView - beforeRouteEnter",this,to,from);
            let token  = sessionStorage.getItem("token")
            if(token){
                return true
            }else{
                return "/route/login"
                // return {
                //     path:"/route/login"
                // }
            }
        },
        beforeRouteUpdate(to,from){
            // console.log("beforeRouteUpdate 监控到参数变化:",this.$route.query);
            console.log("beforeRouteUpdate 监控到参数变化:",to.query);
            console.log("beforeRouteUpdate to 将要访问的路由组件信息对象:",to);
            console.log("beforeRouteUpdate form 访问新路由之前的的路由组件信息对象:",from);
        },
        beforeRouteLeave(to,from){
            console.log("RouterAliveView - beforeRouteLeave",to,from);
            let flag = confirm("订单尚未完成是否离开")
            if(flag){
                // 数据的重置=>全局共享仓库中的数据
                return true
            }else{
                return false;
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>